// 这个插件文件，统一注册全局组件 , 统一注册全局指令，在v2中还可以注册全局过滤器
import { App } from 'vue'

import { useIntersectionObserver } from '@vueuse/core'
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import XtxBread from './bread/index.vue'
import XtxBreadItem from './bread/item.vue'
import XtxCity from './city/index.vue'

import defaultImg from '@/assets/images/200.png'

// export default {
//   install(app: any) {
//     app.component('XtxSkeleton', XtxSkeleton)
//   }
// }

const install = (app: App) => {
  // 构建全局组件
  app.component(XtxSkeleton.name, XtxSkeleton)
  app.component(XtxCarousel.name, XtxCarousel)
  app.component(XtxMore.name, XtxMore)
  app.component(XtxBread.name, XtxBread)
  app.component(XtxBreadItem.name, XtxBreadItem)
  app.component(XtxBreadItem.name, XtxBreadItem)
  app.component(XtxCity.name, XtxCity)

  // 构建指令
  // <img :src="item.picture" alt="" />
  // <img v-lazy="item.picture" alt="" />
  /**
   * vue2的写法，用的是 inserted方法
   *  app.directive('lazy', {
        inserted() {
          el 目标元素 binding 指令相关的信息
         }
      })
   */

  // V3 用的是mounted
  app.directive('lazy', {
    // 指令所在元素的节点 被插入 父节点时触发
    mounted(el, binding) {
      // 目标元素，binding指令相关的信息
      const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElment) => {
        // console.log(el, binding)
        if (!isIntersecting) return
        // 给el元素设置src属性
        el.src = binding.value
        // 停止监听
        stop()

        // 如果加载失败 设置监听失败的事件，设置一张默认图片
        el.onerror = () => {
          el.src = defaultImg
        }
      })
    }
  })

}

export default install

